<template>
  <view class="content">
    <!-- 头部区域 -->
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
      <view class="jifen">{{ num }}</view>
      <view class="jifen1">当前积分</view>

      <view class="fotBtn">
        <view style="margin-right: 10rpx;" @click="getInIntegralRecord">积分记录</view>
        <view @click="getinExchangeRecord">兑换记录</view>
      </view>
    </view>

    <!-- 奖品区域 -->
    <view class="goods">
      <view class="goodsdetails" v-for="(item, index) in goodsList" :key="index">
        <view class="box"><image style="width: 100%; height: 100%;" :src="item.prizeAvatar"></image></view>
        <view class="box">
          <view class="">
            <view>{{ item.prizeName }}</view>
            <view>积分: {{ item.needIntegral }}</view>
          </view>
          <view><view @click="getInexchange(item)" class="center">立即兑换</view></view>
        </view>
      </view>

      <u-divider text="没有更多了"></u-divider>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      num: null, //我的积分
      needNum: null, //商品所需积分
      // 请求配置对象
      goodObj: {
        equipment: 0,
        pageIndex: 1,
        pageSize: 5
      },
      // 商品数据
      goodsList: [],
      openId: uni.getStorageSync('openid')
    };
  },
  onLoad() {
    this.getGoodsList();
  },
  onShow() {
    this.getIntegral();
  },
  methods: {
    // 获取商品
    async getGoodsList() {
      const { data } = await uni.$http.post('/prize/findPage', this.goodObj);
      console.log(data);
      if (data.statusCode !== 200) {
        return uni.$u.toast('获取失败');
      } else {
        this.goodsList = data.data.data;
        console.log('this.goodsList', this.goodsList);
      }
    },
    async getIntegral() {
      const { data } = await uni.$http.get('/integral/findIntegralByOpenId?openId=' + this.openId);
      console.log(data);
      if (data.statusCode !== 200) {
        return uni.$u.toast('获取失败');
      } else {
        this.num = data.data.integral;
        console.log('this.goodsList', this.goodsList);
      }
    },
    // 商品详情
    async getInexchange(item) {
      // console.log('商品信息' , item)
      uni.navigateTo({
        url: '../goodsDetails/goodsDetails?id=' + item.id
      });
    },
    // 积分记录
    getInIntegralRecord() {
      uni.navigateTo({
        url: '../IntegralRecord/IntegralRecord'
      });
    },
    // 兑换记录
    getinExchangeRecord() {
      uni.navigateTo({
        url: '../ExchangeRecord/ExchangeRecord'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  // width: 100%;
  height: 100%;
  background-color: #ffffff;

  .content-header {
    position: relative;
    // height: 500rpx;
    image {
      width: 100%;
      height: 350rpx;
    }
    .jifen {
      position: absolute;
      top: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50rpx;
      color: #ffffff;
      font-weight: 500;
    }
    .jifen1 {
      position: absolute;
      top: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22rpx;
      color: #fdfdfd;
    }
    .fotBtn {
      position: absolute;
      top: 160rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 50rpx;
      display: flex;
      justify-content: center;
      view {
        width: 150rpx;
        height: 100%;
        background-color: #ffffff;
        border-radius: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #2589ff;
      }
    }
  }

  .goods {
    width: 80%;
    position: absolute;
    top: 240rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 100rpx;
    .goodsdetails {
      width: 100%;
      height: 200rpx;
      border-radius: 25rpx;
      margin-top: 10rpx;
      box-sizing: border-box;
      padding: 20rpx;
      box-shadow: 0 0 10rpx #ccc;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .center {
          width: 150rpx;
          height: 50rpx;
          border-radius: 25rpx;
          background-color: #2589ff;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
